<template>
  <el-dialog title="规格参数"   v-if="openAttrDialog" :close-on-click-modal="false" :visible.sync="openAttrDialog" width="800px" append-to-body>
    <div style="height: 500px" v-loading="loading">
      <!--规格参数开始 -->
      <el-col :span="24" >
        <el-card class="box-card"  style="height:500px">
          <el-tabs tab-position="left">
            <el-tab-pane
              :label="group.attrGroupName"
              v-for="(group,gidx) in attrGroupWithAttr.attrGroups"
              :key="group.attrGroupId"
            >
              <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spuInfo.baseAttrs[0] = [{attrId:xx,val:}]-->
              <el-form ref="form" :model="attrGroupWithAttr">
                <el-form-item
                  :label="attr.attrName"
                  v-for="(attr,aidx) in group.mallAttrVoList"
                  :key="attr.attrId"
                >
                  <el-input
                    v-model="attrGroupWithAttr.baseAttrs[gidx][aidx].attrId"
                    type="hidden"
                    v-show="false"
                  ></el-input>
                  <el-select
                    v-model="attrGroupWithAttr.baseAttrs[gidx][aidx].attrValues"
                    style="width: 400px;padding-right:10px "
                    :multiple="attr.valueType == 1"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择或输入值"
                  >
                    <el-option
                      v-for="(val,vidx) in attr.valueSelect.toString().split(',')"
                      :key="vidx"
                      :label="val"
                      :value="val"
                    ></el-option>
                  </el-select>
                  <el-checkbox
                    v-model="attrGroupWithAttr.baseAttrs[gidx][aidx].showDesc"
                    :true-label="1"
                    :false-label="0"
                  >快速展示</el-checkbox>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveAttrs">保存</el-button>
    </div>
    <!--规格参数结束-->
  </el-dialog>
</template>

<script>
  import {getAttrGroupWithAttrByCatelogId} from "@/api/mall/pms/attrGroup";
  import {getListBySpuId,saveBatch} from "@/api/mall/pms/productAttrValue";
    export default {
      // 遮罩层
      loading: true,
        name: "attrUpdate",
      //接受父组件传来的值
      props: {
        catalogId: null,
        spuId: null,
        //弹出层
        openAttrDialogProp: {
          type: Boolean,
          default(){
            return false;
          }
        },
      },
      watch:{
        openAttrDialogProp(){
          this.attrGroupWithAttr.attrGroups=[]
          this.attrGroupWithAttr.baseAttrs=[]
          if(this.openAttrDialogProp ==true){
            this.$nextTick(()=>{
              this.openAttrDialog = this.openAttrDialogProp;
              this.getSpuBaseAttrs(this.spuId);
              this.showBaseAttrs(this.catalogId);
              this.loading=false
            })
          }
        }
      },
      data() {
        return {
          attrGroupWithAttr: {
            //后台返回的所有数据
            attrGroups: [],
            baseAttrs: []
          },
          spuAttrsMap: {},
          openAttrDialog:false,
        };
      },

      methods: {
        getSpuBaseAttrs(spuId) {
          this.spuAttrsMap={}
          getListBySpuId(spuId).then(response => {
            response.data.forEach(item => {
              this.spuAttrsMap["" + item.attrId] = item;
            });
          }).catch(()=>{})
        },
        showBaseAttrs(catalogId) {
          let _this = this;
          getAttrGroupWithAttrByCatelogId(catalogId).then(response => {
            this.attrGroupWithAttr.attrGroups = response.data;
            //先对表单的baseAttrs进行初始化
            response.data.forEach(item => {
              let attrArray = [];
              if(item.mallAttrVoList!=null&&item.mallAttrVoList.length>0){
                item.mallAttrVoList.forEach(attr => {
                  let v = "";
                  if (_this.spuAttrsMap["" + attr.attrId]) {
                    v = _this.spuAttrsMap["" + attr.attrId].attrValue.split(",");
                      if(attr.valueType!==1){
                        v = v.toString();
                      }
                  }
                  attrArray.push({
                    attrId: attr.attrId,
                    attrName: attr.attrName,
                    attrValues: v,
                    showDesc: _this.spuAttrsMap["" + attr.attrId]
                      ? _this.spuAttrsMap["" + attr.attrId].quickShow
                      : attr.showDesc
                  });

                });
              }else{
                attrArray.push(null)
              }

              this.attrGroupWithAttr.baseAttrs.push(attrArray);

            });

          }).catch(()=>{

          })
        },
        //保存规格参数
        saveAttrs(){
          let data = [];
          this.attrGroupWithAttr.baseAttrs.forEach(item => {
            if(item!=null&&item!=''){
              item.forEach(attr => {
                let val = "";
                if (attr.attrValues instanceof Array) {
                  val = attr.attrValues.join(",");
                } else {
                  val = attr.attrValues;
                }
                if (val != "") {
                  data.push({
                    attrId: attr.attrId,
                    attrName: attr.attrName,
                    attrValue: val,
                    quickShow: attr.showDesc
                  });
                }
              });
            }
          });


          saveBatch(this.spuId,data).then(response => {
            if(response.code==200){
              this.openAttrDialog=false;
              this.msgSuccess("保存成功");
            }
          }).catch(()=>{})

        },
      }
    }
</script>

<style scoped>

</style>
